<template>
  <div>
    <!-- 
      在浏览器上获取点 水平坐标 垂直坐标
      event event的数据类型 mouseEvent
      pageX
      pageY
     -->
     <h1>x的坐标{{x}}</h1>
     <h1>y的坐标{{y}}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent} from 'vue'
import useGetMousePosition from './hooks/useGetMousePosition'
export default defineComponent({
  setup () {
    
    // 自定义hook
    // hook的作用就是将具有特定功能的一段代码封装起来 什么时候用 什么时候调用 模块的复用功能

    // 获取 xy
    // 能获取xy的值 xy的值都是ref对象
    console.log(useGetMousePosition())
    const {x,y}=useGetMousePosition()
    return {
      x,
      y,
    }
  }
})
</script>

<style scoped>

</style>